import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Row, Col, Select, Button, Input } from 'antd';
import router from 'umi/router';
import { urlParse } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import LocalPolicy from './ProvidentFund/Index';

const FormItem = Form.Item;
const { Option } = Select;

@connect(({ localpolicy }) => ({
  localpolicy,
}))
@Form.create()
class BasicList extends PureComponent {
  state = {};

  componentDidMount() {
    const { dispatch, location } = this.props;
    const url = location.search;
    const { accuLsPkgId } = urlParse(decodeURIComponent(url));
    dispatch({
      type: 'localpolicy/getDictCode',
      payload: ['BIZ_ACCU_TYPE', 'CARRY_RULE'],
    });
    dispatch({
      type: 'localpolicy/providentFundPolicy',
      payload: { accuLsPkgId },
    });
    dispatch({
      type: 'localpolicy/providentFundInformation',
      payload: { accuLsPkgId },
    });
  }

  prev = () => {
    router.goBack();
  };

  urlParse = () => {
    const { location } = this.props;
    const url = location.search;
    const obj = {};
    if (url.indexOf('?') !== -1) {
      const str = url.substr(1);
      const strs = str.split('&');
      strs.forEach(item => {
        obj[item.split('=')[0]] = unescape(item.split('=')[1]);
      });
    }
    return obj;
  };

  render() {
    const { form, localpolicy } = this.props;
    const formItemLayout = {
      labelCol: { md: { span: 12 } },
      wrapperCol: { md: { span: 10 } },
    };
    const formItemLayout2 = {
      labelCol: { md: { span: 10 } },
      wrapperCol: { md: { span: 12 } },
    };
    const { getFieldDecorator } = form;

    return (
      <div>
        <PageHeaderWrapper />
        <Card style={{ marginTop: 12, marginLeft: 12, marginRight: 12 }}>
          <div style={{ marginTop: 22 }}>
            <Form onSubmit={this.handleSubmit}>
              <Row style={{ marginBottom: 50, padding: '0 40px' }}>
                <Col span={7}>
                  <FormItem {...formItemLayout2} label="组合名称">
                    {getFieldDecorator('accuLsPkgName', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: localpolicy.personnelData.accuLsPkgName,
                    })(<Input placeholder="请输入" disabled />)}
                  </FormItem>
                </Col>
                <Col span={10}>
                  <FormItem {...formItemLayout} label="是否区分缴费人员类别">
                    {getFieldDecorator('hshdRegFlagName', {
                      rules: [{ required: true, message: '请选择' }],
                      initialValue: localpolicy.personnelData.hshdRegFlagName,
                    })(
                      <Select
                        onChange={this.registChange}
                        style={{ width: '100%' }}
                        placeholder="请选择"
                        disabled
                      >
                        <Option key="1">是</Option>
                        <Option key="2">否</Option>
                      </Select>
                    )}
                  </FormItem>
                </Col>
              </Row>
            </Form>
            <div>
              <LocalPolicy
                {...this.props}
                isprovidentFund={2}
                isaddBtn={2}
                insuranceInformationData={localpolicy.insuranceInformationData}
              />
            </div>
          </div>
          <p style={{ textAlign: 'center' }}>
            <Button style={{ marginLeft: 30 }} size="large" onClick={() => this.prev()}>
              返回
            </Button>
          </p>
        </Card>
      </div>
    );
  }
}
const BasicListFrom = Form.create()(BasicList);
export default BasicListFrom;
